<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,700" />
    <style type="text/css" media="screen">
        /*html, body { padding: 0px; margin: 0px; }
        nav { margin-top: 0px; padding-top: 0px; background-color: #242628; height: 60px; width: 100%; }
        nav ul { margin: 0px; }
        nav ul li { margin: 0px; list-style: none; display: inline-block; padding-top: 20px; }*/
        @font-face {
          font-family: 'GhostIcons';
          src: url('fonts/icons.woff?v=0.1') format('woff');
          font-weight: normal;
          font-style: normal; }

        [class*=icon-]:before, .gh-select:after, .nav-list-item:before, .modal-content .close:before, .notification-success:before, .notification-error:before, .notification-warn:before, .notification-info:before, .notification-success .close:after, .notification-error .close:after, .notification-warn .close:after, .notification-info .close:after, .image-uploader .media:before, .image-uploader .image-webcam:before, .image-uploader .image-url:before, .image-uploader .image-upload:before, .pre-image-uploader .image-cancel:before, .splitbtn .dropdown-toggle .options:before, .splitbutton .options:before, .splitbutton-save .options:before, .splitbutton-add .options:before, .splitbutton-delete .options:before, .splitbutton-alt .options:before, .splitbutton .options:hover:before, .splitbutton-save .options:hover:before, .splitbutton-add .options:hover:before, .splitbutton-delete .options:hover:before, .splitbutton-alt .options:hover:before, .splitbutton .options:focus:before, .splitbutton-save .options:focus:before, .splitbutton-add .options:focus:before, .splitbutton-delete .options:focus:before, .splitbutton-alt .options:focus:before, .splitbutton .options.up:hover:before, .splitbutton-save .options.up:hover:before, .splitbutton-add .options.up:hover:before, .splitbutton-delete .options.up:hover:before, .splitbutton-alt .options.up:hover:before, .splitbutton .options.up:focus:before, .splitbutton-save .options.up:focus:before, .splitbutton-add .options.up:focus:before, .splitbutton-delete .options.up:focus:before, .splitbutton-alt .options.up:focus:before, .menu-button:before, .content-list .btn-green:before, .content-list .featured:before, .content-list li a:after, .content-preview .unfeatured:before, .content-preview .featured:before, .content-preview .post-edit:before, .markdown-help:before, .markdown-help:hover:before, #entry-tags .tag:after, .post-settings:before, .settings-nav li a:after, .about-ghost-intro .ghost_logo:before, .about-ghost-intro .ghost_logo:after {
          font-family: "GhostIcons";
          font-weight: normal;
          font-style: normal;
          vertical-align: -3%;
          text-transform: none;
          speak: none;
          line-height: 1;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale; }

        [class*=icon-]:hover {
          text-decoration: none; }

        ::selection { background: #b3d5f3; }
        ::-moz-selection { background: #b3d5f3; }
        a {
            color: #5BA4E5;
            text-decoration: none;
            -webkit-transition: background 0.3s, color 0.3s;
            transition: background 0.3s, color 0.3s;
        }
        a:hover {
            text-decoration: none;
            -webkit-transition: background 0.1s, color 0.1s;
            transition: background 0.1s, color 0.1s;
        }
        a.highlight { color: #F2A925; font-weight: bold; }
        .header-nav {
            height: 60px;
            position: fixed;
            top: 0;
            right: 0;
            bottom: auto;
            left: 0;
            z-index: 800;
            background: #242628;
            -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
            transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
        }
        .header-nav a {
            position: relative;
            display: block;
            float: left;
            height: 60px;
            /*padding-right: 10px;*/
            font-size: 0.9rem;
            letter-spacing: 0px;
            font-weight: 200;
            line-height: 0.9em;
            margin-left: 6px;
            margin-right: 6px;
        }
        .header-nav a .label {
            height: 36px;
            margin-top: 12px;
            padding: 10px 12px;
            color: rgba(255, 255, 255, 0.7);
            text-transform: uppercase;
            border-radius: 4px;
            white-space: nowrap;
            /* -webkit-transition: color 0.5s, background 0.5s; */
            transition: color 0.5s, background 0.5s;
        }
        .icon-system:before { content: '\f629'; }
        .icon-content:before { content: '\f62d'; }
        .icon-add:before { content: '\f632'; }
        .icon-ghost:before { content: '\f600'; }
        .header-nav a .current {
            background-color: #0E0F10;
        }
        * { box-sizing: border-box; }
        .page-content {
            position: absolute;
            top: 60px;
            right: 0;
            bottom: 0;
            left: 0;
            background: #fff;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .menu-nav {
            width: 25%;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            z-index: 700;
            background: #fff;
            box-shadow: #edece4 1px 0 0;
        }
        .menu-nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            border-top: none;
        }
        .menu-nav li {
            border-top: #fff 1px solid;
            position: relative;

            margin-right: 0;
            position: relative;
            color: #242628;
        }
        .menu-nav li.active {
            font-weight: bold;
            background: #fff;
            z-index: 300;
            border-top: #edece4 1px solid;
            box-shadow: #fff 1px 0 0, #edece4 0 1px 0;
            -webkit-transition: all 0.15s ease-out 0s;
            transition: all 0.15s ease-out 0s;
        }
        .menu-nav li.active a {
            color: #242628;
            font-weight: bold;
            background: #fff;
        }
        .menu-nav li a {
            display: block;
            border-bottom: #edece4 1px solid;
            padding: 18px 15px 18px 60px;
            border-bottom: none;
            color: #aaa9a2;
        }
        .menu-nav li:hover {
            background-color: #fff;
        }
    </style>
</head>
<body>
    <nav class="header-nav">
        <a href="" title="">
            <div class="label">
                <i class="icon-ghost">&nbsp;</i>
            </div>
        </a>
        <a href="" title="">
            <div class="label current">
                <i class="icon-content"></i>
                商铺管理
            </div>
        </a>
        <a href="" title="">
            <div class="label">
                <i class="icon-add"></i>
                粉丝管理
            </div>
        </a>
        <a href="" title="">
            <div class="label">
                <i class="icon-system"></i>
                系统管理
            </div>
        </a>
    </nav>
    <div class="page-content">
        <nav class="menu-nav">
            <ul>
                <li class="active">
                    <a href="" title="">
                        <div class="label current">
                            <i class="icon-content"></i>
                            商铺管理
                        </div>
                    </a>
                </li>
                <li>
                    <a href="" title="">
                        <div class="label">
                            <i class="icon-add"></i>
                            粉丝管理
                        </div>
                    </a>
                </li>
                <li>
                    <a href="" title="">
                        <div class="label">
                            <i class="icon-system"></i>
                            系统管理
                        </div>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</body>
</html>